<template>
  <div class="container" style="width:100%;text-align:center">
    <el-collapse v-model="activeName" accordion style="text-align:center;margin:0 auto">
      <el-collapse-item :name="index" v-for="(item,index) in announce" :key="index">
        <template slot="title">
          <span style="font-size:13px; margin-left:10px">{{item.title}}</span>
          <span style="margin-left:50px; font-size:11px; color: #909399">{{item.date}}</span>
        </template>
        <div style="margin-left:10px">{{item.content}}</div>
      </el-collapse-item>
    </el-collapse>
    <el-row>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="announceList.length"
        style="text-align: center; margin-top:10px;"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
      currentPage: 1,
      announce: [],
      pageSize: 8,
      announceList: [
        {
          title: "第一章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第二章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第三章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第四章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第五章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第六章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第七章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第八章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第九章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第十章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第一章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第二章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第三章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第四章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第五章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第六章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第七章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第八章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第九章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        },
        {
          title: "第十章作业",
          date: "2020/10/24",
          content: "预习课本1~5页"
        }
      ]
    };
  },
  methods: {
    //处理页数的改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.announce = this.announceList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }
  },
    mounted() {
      // 挂载时载入当前学生数，看情况要不要
      this.handleCurrentChange(this.currentPage)
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-collapse-item__header {
  color: #333333;
  background-color: rgba(242, 242, 242, 1);
  height: 29px;
  width: 100%;
}

.el-collapse-item:nth-child(n + 1) {
  margin-top: 5px;
  border: 1px solid rgba(204, 204, 204, 1);
  width: 400px;
  padding: 0;
}

.el-collapse {
  width: 400px;
  border: 0;
}

/deep/ .el-collapse-item__content {
  border-top: 1px solid rgba(204, 204, 204, 1);
}
</style>